<template>
  <div class="report_page">
    <div class="w1200">
      <!-- 面包屑 开始 -->
      <div class="breadcrumb">
        <el-breadcrumb class="el_breadcrumb" separator-class="el-icon-arrow-right">
          <el-breadcrumb-item><nuxt-link to="/home">首页</nuxt-link></el-breadcrumb-item>
          <el-breadcrumb-item>报告</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <!-- 面包屑 end -->

      <!-- banner 开始 -->
      <div class="banner">
        <h2 class="h2">生成我的口腔健康报告</h2>
        <h3 class="h3">上传口腔情况，一键生成专属报告</h3>
        <button class="btn" @click="scrollToDiv">立即生成</button>
      </div>
      <!-- banner end -->

      <!-- 简单快捷获取你的专属口腔报告 开始 -->
      <div class="middle_box">
        <h2 class="h2">简单快捷获取你的专属口腔报告</h2>
        <div class="cell_list">
          <div class="cell">
            <img src="@/assets/images/report/icon_01.png" class="img" alt="" />
            <div class="title">
              <span class="num">1</span>
              <span>提交基本资料</span>
            </div>
            <div class="sub_title">根据牙齿实际情况简单描述</div>
          </div>

          <div class="cell">
            <img src="@/assets/images/report/icon_02.png" class="img" alt="" />
            <div class="title">
              <span class="num green_num">2</span>
              <span>上传口腔全景片</span>
            </div>
            <div class="sub_title">快速定位问题牙齿</div>
          </div>

          <div class="cell">
            <img src="@/assets/images/report/icon_03.png" class="img" alt="" />
            <div class="title">
              <span class="num orange_num">3</span>
              <span>生成专属口腔报告</span>
            </div>
            <div class="sub_title">分析牙齿问题、提供参考治疗方案</div>
          </div>
        </div>
      </div>
      <!-- 简单快捷获取你的专属口腔报告 end -->

      <!-- 口腔报告示例 开始 -->
      <div class="report_example">
        <h2 class="h2">口腔报告示例</h2>
        <h3 class="h3">
          快速定位问题口腔、分析病因、提供参考治疗方案，生成自己的专属口腔报告
        </h3>
        <div class="example">
          <div class="info">
            <h4 class="h4">口腔报告<span>示例1</span></h4>
            <p>上传口腔全景片</p>
            <p>快速定位问题牙齿</p>
          </div>
          <img src="@/assets/images/report/example_01.png" class="img" alt="" />
        </div>
        <div class="example">
          <img src="@/assets/images/report/example_02.png" class="img" alt="" />
          <div class="info right">
            <h4 class="h4">口腔报告<span>示例2</span></h4>
            <p>快速定位问题牙齿</p>
            <p>详细分析存在问题</p>
          </div>
        </div>
        <div class="example">
          <div class="info">
            <h4 class="h4">口腔报告<span>示例3</span></h4>
            <p>分析病因</p>
            <p>科普口腔知识</p>
          </div>
          <img src="@/assets/images/report/example_03.png" class="img" alt="" />
        </div>
      </div>
      <!-- 口腔报告示例 end -->

      <!-- 上传口腔情况 开始 -->
      <div class="upload_box" ref="applyBox">
        <h2 class="h2">上传口腔情况</h2>
        <el-form ref="form" :model="form" :rules="formRules" class="el_form" label-width="180px">
          <el-form-item label="是否有口腔全景片" prop="hasPhotos">
            <el-select v-model="form.hasPhotos" class="a_select">
              <el-option label="是" value="1"></el-option>
              <el-option label="否" value="0"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="上传照片" class="file_form_item" prop="photograph" v-if="form.hasPhotos == 1">
            <el-upload class="el_upload" :action="UPLOAD_FILE_INFO" :show-file-list="false" :accept="acceptFiles"
              :on-success="onSuccess">
              <el-button size="small" type="primary" icon="el-icon-upload2" class="upload_btn">上传文件</el-button>
              <div slot="tip" class="el-upload__tip">仅限jpg、png格式</div>
            </el-upload>
            <div class="file_tips" v-if="form.photograph">
              <li-image :src="form.photograph" class="img" :is-preview="true" />
            </div>
          </el-form-item>
          <el-form-item label="姓名" prop="name">
            <el-input v-model="form.name" class="a_input" placeholder="请输入姓名" />
          </el-form-item>
          <el-form-item label="年龄" prop="age">
            <el-input v-model.number="form.age" class="a_input" maxlength="2" max="100" placeholder="请输入年龄" />
          </el-form-item>
          <el-form-item label="您的手机号码" prop="phone">
            <el-input v-model="form.phone" class="a_input" maxlength="11" placeholder="请输入您的手机号码" />
          </el-form-item>
          <el-form-item label="">
            <el-button type="primary" class="btn" :loading="loading" @click="saveInfo">立即提交</el-button>
          </el-form-item>
        </el-form>
      </div>
      <!-- 上传口腔情况 end -->
    </div>
  </div>
</template>
<script>
import { Input, Form, FormItem, Select, Option, Upload } from "element-ui";
import { PLATFORM_TYPE, UPLOAD_FILE_INFO, UPLOAD_ORALCAVITYREPORT_APPLY, GET_SEO_SETTING_INFO } from '@/http/interface'
import { showToast, deepClone } from '@/utils/utils'
import { PHONE_VALIDATOR, IS_DECIMAL } from '@/utils/validator'
export default {
  components: {
    [Form.name]: Form,
    [FormItem.name]: FormItem,
    [Select.name]: Select,
    [Option.name]: Option,
    [Input.name]: Input,
    [Upload.name]: Upload
  },
  data() {
    return {
      form: {},
      UPLOAD_FILE_INFO,
      loading: false,
      formRules: {
        hasPhotos: [{ required: true, message: '请选择是否有口腔全景片', trigger: 'change' }],
        photograph: [{ required: true, message: '请上传照片', trigger: 'change' }],
        name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
        age: [{ required: true, message: '请输入年龄', trigger: 'blur' }, { validator: IS_DECIMAL, trigger: 'blur' }],
        phone: [{ required: true, message: '请输入您的手机号码', trigger: 'blur' }, { validator: PHONE_VALIDATOR, trigger: 'blur' }],
      },
      acceptFiles: '.jpg,.png,.jpeg',
      seoInfo: {}
    };
  },
  head() {
    return {
      title: this.seoInfo.title,
      meta: [
        {
          hid: "description",
          name: "description",
          content: this.seoInfo.description,
        },
        {
          hid: "Keywords",
          name: "Keywords",
          content: this.seoInfo.keywords,
        },
      ],
      link:[
        {ref:'canonical',href:`${this.$domain}/report`}
      ]
    };
  },
  async asyncData({$axios}) {
    // 获取seo配置
    let seo = await $axios.get(GET_SEO_SETTING_INFO, {
      params: { type: 9, platform: PLATFORM_TYPE },
    });
    let seoInfo = seo.data || {};
    return { seoInfo }
  },
  methods: {

    // 监听文件上传成功
    onSuccess(response) {
      console.log(response)
      if (response.code == 200) {
        this.$set(this.form, 'photograph', response.data)
      }
    },

    // 提交报告
    saveInfo() {
      let _this = this;
      _this.$refs.form.validate(valid => {
        if (!valid) {
          return false;
        }
        _this.sendInfo()
      })
    },


    // 发送请求
    async sendInfo() {
      let _this = this;
      let o = deepClone(this.form);
      let oParams = {}
      oParams.name = o.name
      oParams.age = o.age
      oParams.phone = o.phone
      oParams.hasPhotos = o.hasPhotos
      if (o.hasPhotos == 1) {
        oParams.photograph = o.photograph
      }
      oParams.platform = PLATFORM_TYPE
      _this.loading = true;
      let res = await _this.$axios.post(UPLOAD_ORALCAVITYREPORT_APPLY, oParams)
      _this.loading = false;
      if (res.code == 200) {
        showToast({
          message: '提交成功',
          type: 'success'
        })
        _this.form = {}
        setTimeout(function () {
          _this.$refs.form.clearValidate()
        }, 30)

      }
    },

    // 跳转到指定位置
    scrollToDiv() {
      let _dom = this.$refs.applyBox;
      if (_dom) {
        _dom.scrollIntoView();
      }
    }

  },
};
</script>
<style lang="less" scoped>
@import "/assets/styles/index/report.less";
</style>